<section class="content">
    <div class="row" *ngIf="subAreaItems && subAreaItems.length > 0">
        <div class=" col-xs-12">
            <div class="nav-tabs-custom" style="background-color: transparent;margin-bottom: 0px;">
                <ul class="nav nav-tabs">
                    <li *ngFor="let subArea of subAreaItems">
                        <button *ngIf='subArea?.description === subAreaSelected?.description' class="btn btn-block bg-green"
                            (click)="subAreaChange(subArea)">{{subArea.description}}</button>
                        <button *ngIf='subArea?.description !== subAreaSelected?.description' class="btn btn-block" (click)="subAreaChange(subArea)">{{subArea.description}}</button>
                    </li>
                    <li class="pull-center">
                        <h4>({{loginNum}}人在线)</h4>
                    </li>
                    <li class="pull-right">
                        <button style="background-color:burlywood;" class="btn btn-block" (click)="toggle()">{{toggleLable}}</button>
                    </li>
                    <li class="pull-right">
                        <h5 *ngIf='currentShift===1'>早班</h5>
                        <h5 *ngIf='currentShift===2'>中班</h5>
                        <h5 *ngIf='currentShift===3'>晚班</h5>
                    </li>
                    <li class="pull-right">
                        <h5>{{currentWorkDay}}&nbsp;&nbsp;</h5>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 首页内容区域 -->
    <div class="row" >
        <div class="col-xs-12">
            <div style="background-color: transparent">
                <div class="row">
                    <div class="col-xs-3">
                        <div class="small-box bg-green">
                            <div class="inner">
                                <h3>{{target1}} /   <span>{{target2}}</span></h3>
                                <p>计划产量/实时计划</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-bag"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="small-box bg-aqua">
                            <div class="inner">
                                <h3 [ngStyle]="{color:target2>onLine1?'#f00':'#fff'}">{{onLine1}}</h3>
                                <p>上线产量</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-bag"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="small-box bg-green">
                            <div class="inner">
                                <h3 [ngStyle]="{color:target2>offLine1?'#f00':'#fff'}">{{offLine1}}</h3>
                                <p>下线产量</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-bag"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-3">
                        <div class="small-box bg-yellow">
                            <div class="inner">
                                <h3>{{completed1}}<sup style="font-size: 20px">%</sup></h3>
                                <p>产量完成率</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-person-add"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6 col-md-6">
                        <div class="box box-widget box-solid">
                            <div class="box-header">
                                <i class="fa fa-bar-chart"></i>
                                <h3 class="box-title">
                                    当班小时产量
                                </h3>
                                &nbsp;&nbsp;&nbsp;&nbsp;<span [ngStyle]="{'color' : workStatus === 'Line In Production'?'#82D900':'#f00' , 'font-weight':'600'  }">{{workStatus}}</span>
                            </div>
                            <div class="box-body">
                                <div echarts [options]="prodCountChartOption" [loading]="showloading" (chartInit)="onChartInit(1,$event)"
                                    class="demo-chart" [ngStyle]="{'height':(height*2/8-20)+'px'}"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-3 col-md-3">
                        <div class="box box-widget box-solid">
                            <div class="box-header with-border">
                                <i class="fa fa-phone"></i>
                                <h3 class="box-title">
                                    呼叫
                                </h3>
                            </div>
                            <div class="box-body" [ngStyle]="{'height':(height*2/8)+'px' ,'overflow-y':'auto'}">
                                <ul class="nav nav-pills nav-stacked">
                                    <li *ngFor="let assist of assistList"><a>{{assist.equipment}} <span class="label pull-right bg-yellow">{{assist.duration}}（秒）</span>
                                            <span class="pull-right ">{{assist.assistType}}&nbsp;&nbsp;&nbsp;&nbsp;</span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-3 col-md-3">
                        <div class="box box-widget box-solid">
                            <div class="box-header with-border">
                                <i class="fa fa-bell-o"></i>
                                <h3 class="box-title">
                                    报警
                                </h3>
                            </div>
                            <div class="box-body" [ngStyle]="{'height':(height*2/8)+'px' ,'overflow-y':'auto'}">
                                <ul class="nav nav-pills nav-stacked">
                                    <li *ngFor="let alarm of alarmList"><a>{{alarm.equipment}}<span class="pull-right label bg-red ">{{alarm.duration}}（秒）</span></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-3 col-md-3">
                        <div class="box box-widget box-solid">
                            <div class="box-header">
                                <i class="fa fa-bar-chart"></i>
                                <h3 class="box-title">
                                    CT(S)
                                </h3>
                            </div>
                            <div class="box-body">
                                <div echarts [options]="ctChartOption" [loading]="showloading" (chartInit)="onChartInit(4,$event)"
                                    class="demo-chart" [ngStyle]="{'height':height*2/8+'px'}"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-3 col-md-3">
                        <div class="box box-widget box-solid">
                            <div class="box-header">
                                <i class="fa fa-bar-chart"></i>
                                <h3 class="box-title">
                                    停机(Min)
                                </h3>
                            </div>
                            <div class="box-body">
                                <div echarts [options]="dtChartOption" [loading]="showloading" (chartInit)="onChartInit(4,$event)"
                                    class="demo-chart" [ngStyle]="{'height':height*2/8+'px'}"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-3 col-md-3">
                        <div class="box box-widget box-solid">
                            <div class="box-header">
                                <i class="fa fa-bar-chart"></i>
                                <h3 class="box-title">
                                    堵料(Min)
                                </h3>
                            </div>
                            <div class="box-body">
                                <div echarts [options]="stChartOption" [loading]="showloading" (chartInit)="onChartInit(2,$event)"
                                    class="demo-chart" [ngStyle]="{'height':height*2/8+'px'}"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-3 col-md-3">
                        <div class="box box-widget box-solid">
                            <div class="box-header">
                                <i class="fa fa-bar-chart"></i>
                                <h3 class="box-title">
                                    待料(Min)
                                </h3>
                            </div>
                            <div class="box-body">
                                <div echarts [options]="btChartOption" [loading]="showloading" (chartInit)="onChartInit(3,$event)"
                                    class="demo-chart" [ngStyle]="{'height':height*2/8+'px'}"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row" style="display:none">
        <!-- <app-hc></app-hc> -->
    </div>
</section>